<template>
  <div id="questionBank" class="bank-wrapper">
    <QuestionBankCard
      v-for="(item, i) in listLen"
      :key="i"
      class="card"
    ></QuestionBankCard>
    <div
      v-for="(item, i) in divPlaceholder"
      :key="i"
      class="card"
      :style="{ width: childWidth + 'px' }"
    ></div>
  </div>
</template>

<script>
import QuestionBankCard from "@/components/QuestionBankCard.vue";
import { onUnmounted, reactive, toRefs } from "vue";
export default {
  components: {
    QuestionBankCard,
  },
  setup() {
    const data = reactive({
      childWidth: 300,
      divPlaceholder: 0,
      listLen: 13,
    });
    /**
     * 定时间获取一下当前元素的宽度,然后添加div让flex布局显示的子元素对称。
     * 我没想到更好的方法
     **/
    const dynamicPlaceholder = setInterval(() => {
      const currWidth = document.getElementById("questionBank").offsetWidth;
      const times = Math.floor(currWidth / data.childWidth);
      data.divPlaceholder = times - (data.listLen % times);
    }, 200);
    onUnmounted(() => {
      clearInterval(dynamicPlaceholder);
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
.bank-wrapper {
  width: 100%;
  padding: 1em;
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .card {
    margin: 1em;
  }
}
</style>